﻿<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<title>首页</title>

	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/element.css" />
	<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->

    <!-- 测试样式 -->
    <style>
    h1#icon-h1{
        clear:both;
        font-size:30px;
        line-height: 50px;
        text-align:center;
        padding:10px 0;
        border-bottom:1px solid #ddd;

    }
    #previewTable {
            font-size: 14px;
            text-align: center;
            margin:10px auto;

    }
        
        #previewTable .icon td {
            font-size: 2.2em;
            padding: 0px 5px 20px 5px;
            height: 1.0em;
            width: 0.8em;
            line-height: 140%;
            position: relative;
            text-align: center;
        }
        .plain td{font-size:16px;color:#f90;}
    </style>




</head>
<body>
    
    <h1 id="icon-h1">测试：字体icon引入</h1>
    <table id="previewTable">
        
        <tr class="plain">
            <td>!</td>
            <td>$</td>
            <td>/</td>
            <td>X</td>
            <td>Y</td>
            <td>Z</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr class="icon">
            <td>!</td>
            <td>$</td>
            <td>/</td>
            <td>X</td>
            <td>Y</td>
            <td>Z</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr class="plain">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>:</td>
            <td>;</td>
            <td>&lt;</td>
            <td>=</td>
            <td>&gt;</td>
            <td>?</td>
            <td>@</td>
        </tr>
        
        <tr class="icon">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>:</td>
            <td>;</td>
            <td>&lt;</td>
            <td>=</td>
            <td>&gt;</td>
            <td>?</td>
            <td>@</td>
        </tr>

        <tr class="plain">
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td>I</td>
            <td>J</td>
            <td>K</td>
            <td>L</td>
            <td>M</td>
            <td>N</td>
            <td>O</td>
            <td>P</td>
        </tr>
        
        <tr class="icon">
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td>I</td>
            <td>J</td>
            <td>K</td>
            <td>L</td>
            <td>M</td>
            <td>N</td>
            <td>O</td>
            <td>P</td>
        </tr>

        <tr class="plain">
            <td>Q</td>
            <td>R</td>
            <td>S</td>
            <td>T</td>
            <td>U</td>
            <td>V</td>
            <td>W</td>
            <td>[</td>
            <td>\</td>
            <td>]</td>
            <td>^</td>
            <td>_</td>
            <td>`</td>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        
        <tr class="icon">
            <td>Q</td>
            <td>R</td>
            <td>S</td>
            <td>T</td>
            <td>U</td>
            <td>V</td>
            <td>W</td>
            <td>[</td>
            <td>\</td>
            <td>]</td>
            <td>^</td>
            <td>_</td>
            <td>`</td>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>

        <tr class="plain">
            <td>d</td>
            <td>e</td>
            <td>f</td>
            <td>g</td>
            <td>h</td>
            <td>i</td>
            <td>j</td>
            <td>k</td>
            <td>l</td>
            <td>m</td>
            <td>n</td>
            <td>o</td>
            <td>p</td>
            <td>q</td>
            <td>r</td>
            <td>s</td>
        </tr>
        
        <tr class="icon">
            <td>d</td>
            <td>e</td>
            <td>f</td>
            <td>g</td>
            <td>h</td>
            <td>i</td>
            <td>j</td>
            <td>k</td>
            <td>l</td>
            <td>m</td>
            <td>n</td>
            <td>o</td>
            <td>p</td>
            <td>q</td>
            <td>r</td>
            <td>s</td>
        </tr>

        
        <tr class="plain">
            <td>t</td>
            <td>u</td>
            <td>v</td>
            <td>w</td>
            <td>x</td>
            <td>y</td>
            <td>z</td>
            <td>{</td>
            <td>|</td>
            <td>}</td>
            <td>Ä</td>
            <td>Å</td>
            <td>Ç</td>
            <td>É</td>
            <td>Ñ</td>
            <td>Ö</td>

        </tr>
        
        <tr class="icon">
            <td>t</td>
            <td>u</td>
            <td>v</td>
            <td>w</td>
            <td>x</td>
            <td>y</td>
            <td>z</td>
            <td>{</td>
            <td>|</td>
            <td>}</td>
            <td>Ä</td>
            <td>Å</td>
            <td>Ç</td>
            <td>É</td>
            <td>Ñ</td>
            <td>Ö</td>
        </tr>

        
        <tr class="plain">
            <td>Ü</td>
            <td>á</td>
            <td>à</td>
            <td>â</td>
            <td>ä</td>
            <td>ã</td>
            <td>å</td>
            <td>ç</td>
            <td>é</td>
            <td>è</td>
            <td>ë</td>
            <td>í</td>
            <td>ì</td>
            <td>î</td>
            <td>ï</td>
            <td>ñ</td>
        </tr>
        
        <tr class="icon">
            <td>Ü</td>
            <td>á</td>
            <td>à</td>
            <td>â</td>
            <td>ä</td>
            <td>ã</td>
            <td>å</td>
            <td>ç</td>
            <td>é</td>
            <td>è</td>
            <td>ë</td>
            <td>í</td>
            <td>ì</td>
            <td>î</td>
            <td>ï</td>
            <td>ñ</td>
        </tr>

        
        <tr class="plain">
            <td>ó</td>
            <td>ò</td>
            <td>ô</td>
            <td>ö</td>
            <td>õ</td>
            <td>ú</td>
            <td>ù</td>
            <td>û</td>
            <td>ü</td>
            <td>†</td>
            <td></td>
            <td>£</td>
            <td></td>
            <td>‹</td>
            <td>›</td>
            <td></td>
        </tr>
        
        <tr class="icon">
            <td>ó</td>
            <td>ò</td>
            <td>ô</td>
            <td>ö</td>
            <td>õ</td>
            <td>ú</td>
            <td>ù</td>
            <td>û</td>
            <td>ü</td>
            <td>†</td>
            <td></td>
            <td>£</td>
            <td></td>
            <td>‹</td>
            <td>›</td>
            <td></td>
        </tr>
    </table>    

</body>
</html>